<template>
  <Table
    filter
    :selection="mode === 'choose'"
    v-bind="tableOpts"
    v-on="tableEvent"
  >
    <template #operator>
      <div class="operator-wrap" v-if="mode == 'table'">
        <modifyProduct ref="dialogRef" @change="fetchCurrentTable" />
      </div>
    </template>
  </Table>
</template>

<script>
import { html2Img } from "@/utils/index.js";
import tableMixins from "@/mixins/tableMixins.vue";
import modifyProduct from "./components/modifyProduct.vue";
import { mapActions } from "vuex";
export default {
  name: "ProductManage",
  mixins: [tableMixins],
  meta: { title: "材料管理", authority: 197 },
  components: {
    modifyProduct,
  },
  props: {
    mode: {
      type: String,
      default: "table", // table choose
    },
  },
  data() {
    return {
      apiName: "getMaterial",
      form: {
        productName: {
          tag: "el-input",
          label: "材料名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料名称",
          },
        },
        productCode: {
          tag: "el-input",
          label: "材料编码",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入材料编码",
          },
        },
        directoryId: this.formDirectoryId(),
      },
    };
  },
  computed: {
    columns() {
      const { mode } = this;
      const name = this.$options.name;
      let res = this.$columns[name] || [];
      if (mode == "choose") {
        res = res.filter((e) => !["actions", "sortIndex"].includes(e.prop));
        res = [].concat(
          [
            {
              label: "",
              type: "selection",
              minWidth: "60px",
            },
          ],
          res
        );
      }
      return res;
    },
  },
  activated() {
    this.refreshDirectory();
  },
  methods: {
    ...mapActions(["refreshDirectory"]),
    formatData(res) {
      this.formatProduct(res);
    },
    handleAction(opts, row) {
      const { productName: name, id } = row;
      if (opts === "edit") this.showDialog(opts, row);
      else if (opts === "delete")
        this.showConfirm(`确认删除【${name}】？`, "deleteMaterial", { id });
      else if (opts === "off")
        this.showConfirm(`确认下架【${name}】？`, "patchMaterial", {
          materialStatus: 0,
          id,
        });
      else if (opts === "on")
        this.showConfirm(`确认上架【${name}】？`, "patchMaterial", {
          materialStatus: 1,
          id,
        });
      else if (opts === "qrcode") this.getQrcode(row);
    },
    getQrcode(row) {
      const { productName: name, productCode, id } = row;
      this.$prompt("请输入库存数量", "生成库存二维码", {
        inputPlaceholder: "请输入库存数量",
        inputType: "number",
        inputValidator: (value) => {
          let count = parseInt(value);
          if (isNaN(count)) return "请输入正确的库存数量";
          return true;
        },
      }).then((prompt) => {
        const { value } = prompt;
        let count = parseInt(value);
        if (!isNaN(count))
          this.$api.qrcodeMaterial({ id, count }).then((res) => {
            const download = `${productCode}_${name}_${count}.png`;
            // 材料名称name 数量count
            this.$confirm(
              `<div id="qrcode">
								<img src="${res}" style="width: 100%">
								<div class="info">
									<span>编码：${productCode}</span>
									<span>材料：${name}</span>
									<span>数量：${count}</span>
								</div>
							</div>`,
              `二维码：${download}`,
              {
                cancelButtonText: "取消",
                confirmButtonText: "下载",
                dangerouslyUseHTMLString: true,
              }
            ).then((e) => {
              if (e === "confirm") {
                const html = document.getElementById("qrcode");
                html2Img({
                  html,
                }).then((base64) => {
                  let link = document.createElement("a");
                  link.href = base64;
                  link.download = download;
                  link.click();
                });
              }
            });
          });
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
